import 'package:flutter/material.dart';
import 'package:yp/helper.dart';
import 'package:get/get.dart';

import 'logic.dart';
import 'state.dart';

class ShoppingCartPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ShoppingCartPage();
  }
}

class _ShoppingCartPage extends State<ShoppingCartPage> {
  final ShoppingCartLogic logic = Get.put(ShoppingCartLogic());
  final ShoppingCartState state = Get.find<ShoppingCartLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        centerTitle: true,
        elevation: 0,
        title: Text(
          '购物车',
          style: TextStyle(
            color: Colors.black,
            fontSize: 18,
          ),
        ),
        actions: [
          InkWell(
            onTap: () {
              print('编辑按钮 点击事件！！！');
            },
            child: Container(
              width: setWidth(110),
              alignment: Alignment.center,
              child: Text(
                '编辑',
                style: TextStyle(
                  color: Color(0xff030303),
                  fontSize: 15,
                ),
              ),
            ),
          ),
        ],
      ),
      body: GetBuilder<ShoppingCartLogic>(
        builder: (logic) {
          return Container(
            color: Colors.white,
            child: Column(
              children: [
                Divider(
                  height: 1,
                  color: Color(0x40000000),
                ),
                Expanded(
                  child: Container(
                    color: Color(0xfff5f5f5),
                    child: ListView(
                      children: state.goodsList
                          .asMap()
                          .map((key, value) {
                            return MapEntry(key, _goodsListWidget(index: key));
                          })
                          .values
                          .toList(),
                    ),
                  ),
                ),
                Container(
                  height: setWidth(100),
                  width: MediaQuery.of(context).size.width,
                  color: Color(0xD1FFFFFF),
                ),
              ],
            ),
          );
        },
      ),
    );
  }

  // 商品列表
  Widget _goodsListWidget({
    int index,
  }) {
    List goodList = state.goodsList[index]['goods'];

    return Container(
      color: Colors.white,
      margin: EdgeInsets.only(
        bottom: setWidth(24),
      ),
      child: Column(
        children: [
          Container(
            height: setWidth(82),
            padding: EdgeInsets.symmetric(horizontal: setWidth(20)),
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(
                  color: Color(0xffEFEFEF),
                  width: 1,
                ),
              ),
            ),
            child: Row(
              children: [
                Image.asset(
                  'assets/images/orderStore.png',
                  width: setWidth(36),
                  height: setWidth(36),
                  fit: BoxFit.cover,
                ),
                SizedBox(
                  width: setWidth(10),
                ),
                Text(
                  state.goodsList[index]['titleStr'],
                  style: TextStyle(
                    color: Color(0xff333333),
                    fontSize: 15,
                  ),
                ),
              ],
            ),
          ),
          Column(
            children: goodList
                .asMap()
                .map((key, value) {
                  return MapEntry(
                      key,
                      _goodsItemWidget(
                          listIndex: index, goodsIndex: key, titleStr: value));
                })
                .values
                .toList(),
          ),
        ],
      ),
    );
  }

  // 商品信息
  Widget _goodsItemWidget({
    int listIndex,
    int goodsIndex,
    String titleStr,
  }) {
    return Container(
      child: Column(
        children: [
          Container(
            height: setWidth(212),
            width: MediaQuery.of(context).size.width,
            padding: EdgeInsets.only(
              left: setWidth(20),
              top: setWidth(20),
              right: setWidth(20),
              bottom: setWidth(30),
            ),
            child: Row(
              children: [
                goodsIndex == 0
                    ? Image.asset(
                        'assets/images/selectIcon1.png',
                        width: setWidth(40),
                        height: setWidth(40),
                        fit: BoxFit.cover,
                      )
                    : Icon(
                        Icons.panorama_fish_eye,
                        size: setWidth(40),
                        color: Color(0xffCCCCCC),
                      ),
                Padding(
                  padding:
                      EdgeInsets.only(left: setWidth(18), right: setWidth(16)),
                  child: Image.asset(
                    'assets/images/avatar.png',
                    width: setWidth(160),
                    height: setWidth(160),
                    fit: BoxFit.cover,
                  ),
                ),
                Expanded(
                  child: Container(
                    height: setWidth(160),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              '方太（FOTILE）CXW-258-JCD7方太（FOTILE）CXW-258-JCD7…',
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                              style: TextStyle(
                                color: Color(0xff333333),
                                fontSize: 14,
                              ),
                            ),
                            SizedBox(
                              height: setWidth(12),
                            ),
                            Wrap(
                              spacing: setWidth(10),
                              runSpacing: setWidth(6),
                              children: [
                                Container(
                                  height: setWidth(36),
                                  decoration: BoxDecoration(
                                    borderRadius:
                                        BorderRadius.circular(setWidth(20)),
                                    border: Border.all(
                                      color: Color(0xffcccccc),
                                      width: setWidth(1),
                                    ),
                                  ),
                                  padding: EdgeInsets.symmetric(
                                      horizontal: setWidth(8)),
                                  child: Row(
                                    mainAxisSize: MainAxisSize.min,
                                    children: [
                                      Text(
                                        '澎湃心',
                                        style: TextStyle(
                                          color: Color(0xff666666),
                                          fontSize: 11,
                                        ),
                                      ),
                                      Image.asset(
                                        'assets/images/icon-down.png',
                                        color: Color(0xff666666),
                                        width: setWidth(16),
                                        height: setWidth(10),
                                        fit: BoxFit.cover,
                                      ),
                                    ],
                                  ),
                                ),
                                Container(
                                  height: setWidth(36),
                                  decoration: BoxDecoration(
                                    borderRadius:
                                        BorderRadius.circular(setWidth(20)),
                                    border: Border.all(
                                      color: Color(0xffcccccc),
                                      width: setWidth(1),
                                    ),
                                  ),
                                  padding: EdgeInsets.symmetric(
                                      horizontal: setWidth(8)),
                                  child: Row(
                                    mainAxisSize: MainAxisSize.min,
                                    children: [
                                      Text(
                                        '澎湃心',
                                        style: TextStyle(
                                          color: Color(0xff666666),
                                          fontSize: 11,
                                        ),
                                      ),
                                      Image.asset(
                                        'assets/images/icon-down.png',
                                        color: Color(0xff666666),
                                        width: setWidth(16),
                                        height: setWidth(10),
                                        fit: BoxFit.cover,
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text.rich(
                              TextSpan(
                                children: [
                                  TextSpan(
                                    text: '￥',
                                    style: TextStyle(
                                      color: Color(0xffea5504),
                                      fontSize: 10,
                                    ),
                                  ),
                                  TextSpan(
                                    text: '4239',
                                    style: TextStyle(
                                      color: Color(0xffea5504),
                                      fontSize: 20,
                                    ),
                                  ),
                                  TextSpan(
                                    text: '.00',
                                    style: TextStyle(
                                      color: Color(0xffea5504),
                                      fontSize: 10,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            Row(
                              children: [
                                InkWell(
                                  onTap: () {
                                    print(
                                        '---------------------------- 减少数量 ----------------------------');
                                  },
                                  child: Image.asset(
                                    'assets/images/reduce.png',
                                    width: setWidth(40),
                                    height: setWidth(40),
                                    color: Color(0xff979797),
                                    fit: BoxFit.cover,
                                  ),
                                ),
                                SizedBox(
                                  width: setWidth(66),
                                  child: Center(
                                    child: Text(
                                      '1',
                                      style: TextStyle(
                                        color: Color(0xff333333),
                                        fontSize: 14,
                                      ),
                                    ),
                                  ),
                                ),
                                InkWell(
                                  onTap: () {
                                    print(
                                        '+++++++++++++++++++++++++++ 减少数量 +++++++++++++++++++++++++++');
                                  },
                                  child: Image.asset(
                                    'assets/images/plus.png',
                                    width: setWidth(40),
                                    height: setWidth(40),
                                    color: Color(0xff979797),
                                    fit: BoxFit.cover,
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
          Offstage(
            offstage: !(listIndex == 0 && goodsIndex == 0),
            child: Column(
              children: [
                Container(
                  height: setWidth(86),
                  child: Column(
                    children: [
                      Divider(
                        height: setWidth(1),
                        color: Color(0xffEFEFEF),
                        indent: setWidth(82),
                        endIndent: 0,
                      ),
                      Padding(
                        padding: EdgeInsets.only(
                          left: setWidth(80),
                          top: setWidth(24),
                          right: setWidth(20),
                        ),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Row(
                              children: [
                                Text(
                                  '积分优惠',
                                  style: TextStyle(
                                    color: Color(0xff333333),
                                    fontSize: 12,
                                  ),
                                ),
                                SizedBox(
                                  width: setWidth(10),
                                ),
                                Text(
                                  '使用20积分可享受优惠价29.9元',
                                  style: TextStyle(
                                    color: Color(0xff999999),
                                    fontSize: 12,
                                  ),
                                ),
                              ],
                            ),
                            Text(
                              '参加',
                              style: TextStyle(
                                color: Color(0xfff39800),
                                fontSize: 12,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  height: setWidth(86),
                  child: Column(
                    children: [
                      Divider(
                        height: setWidth(1),
                        color: Color(0xffEFEFEF),
                        indent: setWidth(82),
                        endIndent: 0,
                      ),
                      Padding(
                        padding: EdgeInsets.only(
                          left: setWidth(74),
                          top: setWidth(24),
                          right: setWidth(20),
                        ),
                        child: Row(
                          children: [
                            Container(
                              width: setWidth(48),
                              height: setWidth(24),
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                color: Color(0xfff39800),
                                borderRadius:
                                    BorderRadius.circular(setWidth(12)),
                              ),
                              child: Text(
                                '赠品',
                                style: TextStyle(
                                  color: Color(0xffffffff),
                                  fontSize: 9,
                                ),
                              ),
                            ),
                            SizedBox(
                              width: setWidth(6),
                            ),
                            Expanded(
                              child: Text(
                                '【原装】方太JCD1/JCD6/JCD9B适配3D免清洁滤油网',
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(
                                  color: Color(0xff333333),
                                  fontSize: 12,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Divider(
            height: setWidth(1),
            color: Color(0xffEFEFEF),
            indent: setWidth(20),
            endIndent: 0,
          ),
        ],
      ),
    );
  }
}
